<template>
<div>
  <el-card>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    <el-breadcrumb-item>字典维护</el-breadcrumb-item>
   </el-breadcrumb>
 <el-divider></el-divider>
 <el-table
   :data="tableData"
  style="width: 100%"
  >
<el-table-column type="expand">
  <template slot-scope="props">
    <el-tag
  :key="tag.label"
  :type="props.row.color"
  v-for="tag in props.row.children"
  closable
  :disable-transitions="false"
  @close="handleClose(props.row.id,tag.value)"
  >
  {{tag.value}}
</el-tag>
<el-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm(props.row.id)"
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
  </template>
</el-table-column>
 <el-table-column
      label="序号"
      prop="id">
    </el-table-column>
     <el-table-column
      label="字典名称"
      prop="name">
    </el-table-column>
     <el-table-column
      label="字典描述"
      prop="type">
    </el-table-column>
  </el-table>
  </el-card>
  
</div>
</template>

<script>
export default {
  created() {
    this.getEductionList()
    this.getNationList()
    this.getPowerList()
  },
  data() {
    return {
       inputVisible: false,
        inputValue: '',
        labelValue:'',
      tableData:[
        {
          id:1,
          name:'民族',
          type:'民族',
          color:'success',
          children:[
        {id:1111, value:"汉族",label:"汉族"},
        {id:1111,value:"回族",label:"回族"},
        {id:1111,value:"保安族",label:"保安族"},
        {id:1111,value:"苗族",label:"苗族"},
          ]
        },
        {
          id:2,
          name:'本科',
          type:'本科',
          color:'warning',
           children:[
            {value:'1111'},
            {value:'1111'},
            {value:'1111'},
          ]
        },
        {
          id:3,
          name:'管理员权限',
          type:'管理员权限',
          color:'danger',
           children:[
        {id:1111, value:"超级管理员",label:"超级管理员"},
        {id:1111,value:"高管",label:"高管"},
        {id:1111,value:"普通管理员",label:"普通管理员"},
        {id:1111,value:"项目组员",label:"项目组员"},
          ]
        },
      ]
    }
  },
  methods: {
    // 点击切换输入
     showInput() {
        this.inputVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      // 输入添加标签
       async handleInputConfirm(id) {
        let inputValue = this.inputValue;
        let labelValue =inputValue
        if (inputValue&&id==1) {
         let item={value:inputValue,label:labelValue }
        
         const {data:res} =await this.$http.post('/dicitonary/nation',item)
         console.log(res)
         this.getNationList()
        }
        if (inputValue&&id==2) {
        let item={value:inputValue,label:labelValue }
        
         const {data:res} =await this.$http.post('/dicitonary/eduction',item)
         console.log(res)
         this.getEductionList()
        }
         if (inputValue&&id==3){
         let item={value:inputValue,label:labelValue }
         const {data:res} =await this.$http.post('/dicitonary/power',item)
         console.log(res)
         this.getPowerList()
         }
        this.inputVisible = false;
        this.inputValue = '';
      },
      // 按钮删除
      async handleClose(id,value){
        if (id==1) {
          const {data:res} =await this.$http.delete('/dicitonary/nation/'+value)
          if(res.status==1){
            this.$message.success("删除成功")
          }
            this.getNationList()
        }
        if (id==2) {
         const {data:res} =await this.$http.delete('/dicitonary/eduction/'+value)
          if(res.status==1){
            this.$message.success("删除成功")
          }
         this.getEductionList()
        }
        if (id==3) {
           const {data:res} =await this.$http.delete('/dicitonary/power/'+value)
          if(res.status==1){
            this.$message.success("删除成功")
          }
         this.getPowerList()
        }
      },
      // 获取学历字典
      async getEductionList(){
         const {data:res} =await this.$http.get('/dicitonary/eduction')
          if(res.status==1){
            this.$message.success("获取学历字典成功")
          }
         this.tableData[1].children=res.result
      },
      // 获取民族字典
      async getNationList(){
         const {data:res} =await this.$http.get('/dicitonary/nation')
          if(res.status==1){
            this.$message.success("获取民族字典成功")
          }
          this.tableData[0].children=res.result
      },
      // 获取管理权限字典
      async getPowerList(){
         const {data:res} =await this.$http.get('/dicitonary/power')
          if(res.status==1){
            this.$message.success("获取管理权限字典成功")
          }
          this.tableData[2].children=res.result
      },
      
  },
}
</script>

<style scoped>
.el-tag{
  margin: 20px;
}
 .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
   
  }
</style>